<template lang='pug'>
  .page
    .AccountsReceivableManage
      .search-form.mb-10.pl-10.pr-10(v-if="hasFind")
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="setColStyle" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-if="item.model == 'workFlowStatus'" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, c_index) of arrListDown[item.options]"
                  :value="c_item.value"
                  :key="c_index"
                ) {{ c_item.value }}
              Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'button'")
              Button(type="info" @click="searchFn") 查询


      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条

          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(v-if="hasConfirmPay || hasGetPayList" slot-scope="{ row, index }" slot="action")
            Button.mr-10(v-if="hasConfirmPay" type="text" size="small" @click="handleShowPayListModal(row)") 确认付款
            Button.mr-10(v-if="hasGetPayList" type="text" size="small" @click="handleShowLookPayListModal(row)") 查看付款

    //- 付款弹窗
    PayListModal(ref="PayListModal" @query="query" @handleShowAuditDetailModal="handleShowAuditDetailModal")
    //- 查看付款弹窗
    LookPayListModal(ref="LookPayListModal" @query="query" @handleShowAuditDetailModal="handleShowAuditDetailModal")
    //- 流程审批单弹窗
    AuditDetailModal(ref="AuditDetailModal" @query="query")
</template>


<script>
import { FinanceTreatmentPayableApi } from '@/api/FinanceTreatmentPayable.api.js'
import _cloneDeep from 'clone-deep'
import { treatmentPayableThead } from './tableHead.js'
import PayListModal from "../publicModal/payListModal.vue"
import LookPayListModal from "../publicModal/lookPayListModal.vue"
import AuditDetailModal from "../publicModal/auditDetailModal.vue"
import dataApi from '@/api/data.js'
const colStyle = 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-8'

export default {
  name: 'treatmentPayable',

  props: {},

  components: {PayListModal, LookPayListModal, AuditDetailModal},

  data () {
    return {
      thead: _cloneDeep(treatmentPayableThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        companyName: '',
        employeeName: '',
        iDCardNo: '',
        workFlowStatus: null
      },
      formItem: [
        { type: 'input', label: '客户名称：', placeholder: '请输入客户名称', prop: 'companyName', model: 'companyName', style: colStyle },
        { type: 'input', label: '姓名：', placeholder: '请输入姓名', prop: 'employeeName', model: 'employeeName', style: colStyle },
        { type: 'input', label: '身份证号：', placeholder: '请输入身份证号', prop: 'iDCardNo', model: 'iDCardNo', style: colStyle },
        { type: 'select', label: '审批结果：', placeholder: '请选择审批结果', prop: 'workFlowStatus', model: 'workFlowStatus', options: 'workflowstatus', style: colStyle },
        { type: 'button', style: 'ivu-col-span-2' }
      ],
      rules: {},
      arrListDown: {
        workflowstatus: []
      }
    }
  },


  computed: {
    isWorkFlow () {
      const workFlow = (JSON.parse(localStorage.getItem('clientLoginInfo'))).data.workFlow == 'true' ? true : false
      return workFlow
    },

    setFormItem () {
      if (this.isWorkFlow) {
        return this.formItem
      } else {
        return [...this.formItem.slice(0, 3), ...this.formItem.slice(4, this.formItem.length + 1)]
      }
    },

    setColStyle () {
      if (this.isWorkFlow) {
        return 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-8'
      } else {
        return 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-6'
      }
    },

    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 确认付款
    hasConfirmPay () {
      return this.actionArr.indexOf('ConfirmPay') > -1
    },
    // 查看付款
    hasGetPayList () {
      return this.actionArr.indexOf('GetPayList') > -1
    },
    // 驳回
    hasReject () {
      return this.actionArr.indexOf('Reject') > -1
    },
    // 退回
    hasBack () {
      return this.actionArr.indexOf('Back') > -1
    },
  },

  watch: {},

  beforeMount () {},

  mounted () {
    this.getEnum()
    this.query()
  },

  methods: {
    // 获取下拉
    async getEnum () {
      let groupNames = 'finance.workflowstatus'
      let res = await dataApi.getEnum({
        groupName: groupNames
      })
      this.arrListDown.workflowstatus = this.getItems(res.data, 'finance.workflowstatus')
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    },
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    // 分页页码变动
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 分页页码变动
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },

    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
        IsApply: false
      }
      let res = await FinanceTreatmentPayableApi.getTreatmentPayableList({...params, ...this.formData})
      console.log('应付res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
        this.tableComone.total = res.data.total
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 付款-显示弹窗
    handleShowPayListModal (row) {
      this.$refs.PayListModal.modalType = 'daiyuyingfu'
      this.$refs.PayListModal.query(row)
      this.$refs.PayListModal.show()
      Object.keys(this.$refs.PayListModal.socialSecurityParams).forEach(key => {
        this.$refs.PayListModal.socialSecurityParams[key] = row[key]
      })
    },

    // 查看付款-显示弹窗
    handleShowLookPayListModal (row) {
      this.$refs.LookPayListModal.parentRow = row
      this.$refs.LookPayListModal.modalType = 'daiyuyingfu'
      this.$refs.LookPayListModal.query(row)
      this.$refs.LookPayListModal.show()
    },

    // 流程审批单-显示弹窗
    handleShowAuditDetailModal(row) {
      console.log('流程审批单-显示弹窗 row: ', row)
      this.$refs.AuditDetailModal.modalType = '待遇审批详情'
      this.$refs.AuditDetailModal.show(row)
    }
  },
}
</script>